export default {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      const button = el
      button.style.position = 'relative'
      button.style.overflow = 'hidden'
      
      const ripple = document.createElement('span')
      const rect = button.getBoundingClientRect()
      const size = Math.max(rect.width, rect.height)
      const x = event.clientX - rect.left - size / 2
      const y = event.clientY - rect.top - size / 2
      
      ripple.className = 'waves-ripple'
      ripple.style.width = `${size}px`
      ripple.style.height = `${size}px`
      ripple.style.top = `${y}px`
      ripple.style.left = `${x}px`
      ripple.style.position = 'absolute'
      ripple.style.borderRadius = '50%'
      ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'
      ripple.style.transform = 'scale(0)'
      ripple.style.opacity = '1'
      ripple.style.pointerEvents = 'none'
      ripple.style.transition = 'transform 0.6s ease-out, opacity 0.6s ease-out'
      
      button.appendChild(ripple)
      
      setTimeout(() => {
        ripple.style.transform = 'scale(2)'
        ripple.style.opacity = '0'
      }, 50)
      
      setTimeout(() => {
        ripple.remove()
      }, 600)
    })
  }
}
